<template>
	<view class="box">
		<u-navbar title="元宝换通宝" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#E0DDDA" rightText="批量购买" @rightClick="right"
			@leftClick="leftClick"></u-navbar>
		<view class="tab-nav">
			<view class="tab-list-item" @click="isSwitch=!isSwitch">
				<text class="text">比例筛选</text>
			</view>
			<view class="tab-list-item">
				<view class="text">数量</view>
				<view class="xuanze flex_Z">
					<image :src="upSelect2? select:noselect" @click.stop="click2('up')"></image>
					<image :src="downSelect2? select2:noselect2" @click.stop="click2('down')"></image>
				</view>
			</view>
		</view>
		<view class="selwrap" v-if="isSwitch">
			<view class="selitem" v-for="(item,index) in downList" :key="item.id" @click="selcet(item.type)">
				{{item.name}}
			</view>
		</view>
		<view class="main-wrap" v-if="!isSwitch">
			<checkbox-group @change="checkboxChangeAll">
				<view class="main" v-for="item in list" :key="item.id">
					<view class="maintop">
						<image src="../../static/image/fhtb.png" mode=""></image>
						<text>福合通宝</text>
						<text>4400</text>
					</view>
					<view class="info">
						单价0.8福合元宝
					</view>
					<checkbox v-if="allow" borderColor="#A68A64" activeBorderColor="#A68A64"
						activeBackgroundColor="#A68A64" backgroundColor="#ffffff" :checked="isSelected(item.id)"
						:value="item.id.toString()"></checkbox>
					<view class="btn" v-if="!allow" @click="showPay=true">
						立即购买
					</view>
					<view class="tip" v-if="!allow">
						支持仅部分购买
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="buyNow flex_c"  v-if="allow" @click="gopay">
			<text>立即购买</text>
		</view>
		<u-popup :show="showPay" @close="showPay = false" closeable bgColor="transparent">
			<view class="pay flex_ZC">
				<text class="c3">购买信息</text>
				<view class="pay_box flex_Z">
					<view class="pay_box_c flex_ld" v-if="!allow">
						<text>最大可购买量</text>
						<text class="c0">4400</text>
						
					</view>
					<view class="pay_box_c flex_ld" v-if="!allow">
						<text>输入购买量</text>
						<input type="number" v-model="number" />
					</view>
		
					<view class="pay_money  flex_ld">
						<text class="c6">应付金额</text>
						<view class=" flex_dq">
							<image class="pay_img" src="/static/image/fhyb.png" mode=""></image>
							<text class="c5 go_pay">111</text>
						</view>
					</view>
				</view>
				<view class="buyNow flex_c" @click="">
				
					<text>立即购买</text>
				</view>
			</view>
		</u-popup>
		<!-- 	<view class="btn" @click="toggleSelectAll">
			{{ selectAllButtonText }}
		</view> -->

		<view class="black" v-if="isSwitch" @click.stop="isSwitch=false">

		</view>
	</view>

</template>

<script>
	import {
		WithdrawInfo,
		fhTransfer
	} from "../../api/wallet.js"
	export default {
		data() {
			return {
				allow: false,
				select: '../../static/image/tops.png',
				select2: '../../static/image/downs.png',
				noselect: '../../static/icon/i_xz.png',
				noselect2: '../../static/icon/i_xz2.png',
				upSelect1: true,
				downSelect1: false,
				upSelect2: false,
				downSelect2: false,
				sxshow: false,
				isSwitch: false,
				downList: [{
						id: 1,
						name: '单价0.7福合元宝',
						type: '1'
					},
					{
						id: 2,
						name: '单价0.8福合元宝',
						type: '2'
					},
					{
						id: 3,
						name: '单价0.9福合元宝',
						type: '3'
					},
				],
				selectedIds: [],
				list: [{
					id: 1,
				}, {
					id: 2
				}, {
					id: 3
				}],
				selectAllButtonText: '全选',
				showPay:false,
				number:1
			}
		},
		onLoad() {



		},
		computed: {

		},
		methods: {
			gopay(){
				if(this.selectedIds.length==0){
					uni.$u.toast("请选择商品")
				}else{
					this.showPay=true
				}
			},
			toggleSelectAll() {
				if (this.selectedIds.length === this.list.length) {
					this.selectedIds = [];
				} else {
					this.selectedIds = this.list.map(item => item.id);
				}
				this.selectAllButtonText = this.selectedIds.length === this.list.length ? '取消全选' : '全选';
			},
			checkboxChangeAll(e) {

				const selectedIds = e.mp.detail.value;
				if (selectedIds.length === this.list.length) {
					this.selectAllButtonText = '取消全选';
				} else {
					this.selectAllButtonText = '全选';
				}
				this.selectedIds = selectedIds;
			},
			selcet(val) {
				this.isSwitch = false
				console.log(val)
			},
			isSelected(id) {
				console.log(id)
				return this.selectedIds.includes(id);
			},
			click2(val) {
				console.log(val)
				if (val == 'up') {
					this.upSelect2 = true
					this.downSelect2 = false
				} else {
					this.downSelect2 = true
					this.upSelect2 = false
				}
			},
			right() {
				this.allow = !this.allow
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.navigateTo({
						url: '/pagesMy/mywallet/newmywallet'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}
	.pay {
		width: 100%;
		background: #E0DDDA;
		border-radius: 20rpx 20rpx 0 0;
		color: #000;
		overflow: auto;
	}
	
	.pay>text {
		font-size: 36rpx;
		margin: 60rpx 0;
	}
	
	.pay_box {
		width: 694rpx;
		// background: #f2f2f2;
		border-radius: 18rpx;
	}
	
	.pay_box_c {
		font-size: 28rpx;
		padding: 28rpx 28rpx 0;
		>input{
			width: 138rpx;
			height: 76rpx;
			background: #F2EFEC;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
		}
	}
	
	.pay_box_c>text:nth-child(1) {
		color: #666666;
	}
	
	.pay_box_c>text:nth-child(2) {
		width: 70%;
		text-align: right;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		color: #333333;
	}
	.buyNow {
		position: relative;
		width: 92%;
		margin: 50rpx auto;
	}
	
	.buyNow>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	.pay_money {
		width: 92%;
		padding: 30rpx 0;
		margin: 30rpx auto 0;
		font-size: 28rpx;
		// border-top: 1rpx solid #ffffff20;
	}
	
	.pay_img {
		width: 42rpx;
		height: 32rpx;
	}
	
	.rough {
		width: 60%;
		/* background: pink; */
	}
	
	.pay_btn {
		min-width: 176rpx;
		padding: 4rpx 0;
		background: #A423EA;
		color: #ffffff;
		border-radius: 40rpx;
	}
	
	.pay_btn_l>image {
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}
	
	.pay_btn_r>image {
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}
	
	.black {
		width: 100vw;
		height: 90vh;
		background-color: #333333;
		opacity: 0.7;
		position: relative;
		z-index: 98;
		top: 10vh;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #E0DDDA;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 999;

		.tab-list-item {
			display: flex;
			align-items: center;
			position: relative;
			width: 350rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #A68A64;
			}
		}
	}

	.selwrap {
		width: 750rpx;
		height: 232rpx;
		background: #E0DDDA;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		position: fixed;

		top: 120px;
		/* #ifdef H5 */
		top: 180rpx;
		/* #endif */
		transition-duration: 2s;
		z-index: 999;

		.selitem {
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
			padding-left: 40rpx;
		}
	}

	.main-wrap {
		margin-top: 120rpx;
		position: relative;
		z-index: 800;
	}

	.top1 {
		top: 80rpx;

	}

	.top2 {
		top: 0rpx;
	}

	.main {
		width: 690rpx;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		// margin-top: 100rpx;
		margin-bottom: 20rpx;
		position: relative;

		.maintop {
			display: flex;
			align-items: center;
			padding-top: 32rpx;

			>image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 26rpx;
			}

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}

		.info {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			margin-left: 30rpx;
			margin-top: 20rpx;
		}

		.btn {
			width: 180rpx;
			height: 60rpx;
			background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
			border-radius: 536rpx 536rpx 536rpx 536rpx;
			position: absolute;
			top: 30rpx;
			right: 20rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60rpx;
		}

		/deep/.uni-checkbox-input {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 54rpx;
			right: 20rpx;
			border-radius: 50%;
			color: #ffffff !important;
		}

		/deep/.uni-checkbox-input::before {
			-webkit-transform: translate(-50%, -48%) scale(.53);
		}

		.tip {
			position: absolute;
			top: 100rpx;
			right: 30rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}
	}

	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #E0DDDA;
		position: relative;
		z-index: 99;
	}

	.xuanze {}

	.xuanze>image {
		width: 22rpx;
		height: 22rpx;
	}

	.xuanze>image:nth-child(1) {
		transform: translateY(4rpx);
	}

	.xuanze>image:nth-child(2) {
		transform: translateY(-4rpx);
	}

	.shuaixuan {
		position: absolute;
		top: 64rpx;
		left: 0;
		width: 24%;
		margin-top: 4rpx;
		z-index: 999;
	}

	.shuaixuan>text {
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background: #E0DDDA;
		padding-left: 32rpx;
		border-bottom: 1rpx solid #ffffff30;
	}
</style>